<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>

    <!--
        关于VueComponent：
            1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

            2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
                即Vue帮我们执行的：new VueComponent(options)。

            3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！注意这一点很重要

            4.关于this指向：
                (1).组件配置中：
                    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
                (2).new Vue(options)配置中：
                    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

            5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
                Vue的实例对象，以后简称vm。 vm管理着一个又一个vc，vc可以再
            6.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
                例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
                所以vm与vc属性配置并不是一模一样，尽管vc底层复用了很多vm的逻辑
    -->
    <div id="app">

    </div>

    <script>
        Vue.config.productionTip = false;
        // 1.创建student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h1>学生姓名：{{name}}</h1>
                    <h1>年龄：{{age}}</h1>
                </div>`,
            data() {
                return {
                    name: '张三',
                    age: 20
                };
            },
        })
        // 1.创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h1>学校名称：{{name}}</h1>
                    <h1>学校地址：{{address}}</h1>
                    <student></student>
                </div>`,
            data() {
                return {
                    name: '华东理工大学',
                    address: '上海'
                };
            },
            components:{
                //子组件注册给哪个父组件，就嵌套在哪个副组件里面
                student:student
            }
        })
        //app组件,管理所有组件
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                </div>`,
            components:{
                school
            }
        })
        const vm = new Vue({
            template:`<app></app>`,
            el:"#app",
            components:{
                app
            }
        })
    </script>
</body>
</html>